<template>
    <div class="created-all-container">
        <div class="number-info">
            <div>
                <div class="red">
                    <img src="~@/assets/all-num.png" alt="" />
                    <div>
                        <p>
                            <span>{{ count.total }}</span>
                        </p>
                        <p>总任务数</p>
                    </div>
                </div>
            </div>
            <div>
                <div class="yellow">
                    <img src="~@/assets/tasking.png" alt="" />
                    <div>
                        <p>
                            <span>{{ count.unfinished }}</span>
                        </p>
                        <p>进行中任务</p>
                    </div>
                </div>
            </div>
            <div>
                <div class="blue">
                    <img src="~@/assets/finshed.png" alt="" />
                    <div>
                        <p>
                            <span>{{ count.finished }}</span>
                        </p>
                        <p>已完成任务</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="pbb__search-box">
            <div class="pbb__search-column fixed-column">
                <div class="pbb__search-group">
                    <el-input
                        class="pbb__search-input"
                        v-model="form.formName"
                        placeholder="请输入表单名称"
                    >
                    </el-input>
                </div>
                <div class="pbb__search-group">
                    <el-select
                        v-model="form.status"
                        placeholder="请选择任务状态"
                        clearable
                    >
                        <el-option value="1" label="进行中"></el-option>
                        <el-option value="2" label="已完成"></el-option>
                    </el-select>
                </div>
                <div class="pbb__search-group">
                    <el-button
                        type="primary"
                        class="pbb__search-btn"
                        @click="searchTable"
                        >搜索</el-button
                    >
                </div>
            </div>
        </div>
        <el-table
            v-show="tableData.length"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            :data="tableData"
            style="
                width: 100%;
                height: calc(100% - 108px - 58px - 70px);
                background: #fff;
                overflow-y: auto;
            "
        >
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60"
            >
            </el-table-column>
            <el-table-column
                prop="formName"
                label="总任务名称"
                min-width="130"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="startDate" width="220" label="下发时间">
            </el-table-column>
            <el-table-column prop="endDate" width="220" label="截止日期">
                <template slot-scope="scope">
                    <span
                        v-if="scope.row.endDate"
                        :class="{
                            rowRed:
                                scope.row.fillStatus === 1 &&
                                new Date(scope.row.endDate).getTime() <
                                    new Date().getTime(),
                        }"
                    >
                        {{ scope.row.endDate.substring(0, 10) }}
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="childTaskCount"
                label="包含子任务数"
                min-width="120"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="expectFillCount"
                label="各子任务期望填报数"
                show-overflow-tooltip
                min-width="160"
            >
            </el-table-column>
            <el-table-column
                prop="realityFillCount"
                label="总计填报数"
                min-width="120"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="fillStatus"
                label="任务状态"
                min-width="80"
            >
                <template slot-scope="scope">
                    <span
                        :class="
                            scope.row.fillStatus === 1
                                ? 'table-tips-inProcess'
                                : 'table-tips-success'
                        "
                    >
                        {{ scope.row.fillStatus === 1 ? "进行中" : "已完成" }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="toChildList(scope.row)"
                        >子任务</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        @click="toDataList(scope.row)"
                        >数据</el-button
                    >
<!--                    <el-button-->
<!--                        v-if="scope.row.fillStatus === 2"-->
<!--                        size="mini"-->
<!--                        type="text"-->
<!--                        @click="shareRow(scope.row)"-->
<!--                        >共享</el-button-->
<!--                    >-->
                    <el-button
                        v-if="scope.row.fillStatus === 1"
                        size="mini"
                        type="text"
                        @click="deleteTask(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text
            style="height: calc(100% - 190px - 69px - 10px); background: #fff"
            v-if="tableData.length === 0"
        >
        </ask-empty-text>
        <pagination
            v-if="total > 0"
            :total="total"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            @pagination="getTable"
        />
        <el-dialog
            title="分享码"
            :visible.sync="dialogVisible"
            width="25%"
            :close-on-click-modal="false"
            class="img-dialog"
        >
            <div v-if="ItemCode">
                <img
                    @click="toDownLoad('data:image/png;base64,' + ItemCode)"
                    :src="'data:image/png;base64,' + ItemCode"
                    alt=""
                />
                <span>点击图片下载，分享到微信填报</span>
            </div>
            <p v-else>分享码正在生成中，请刷新页面获取</p>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { dialogSelect } from "@/views/process-manage/src/components/person-selection/index";
import { downLoadBase64File, localStorage } from "@/utils";
import { State } from "vuex-class";

@Component({
    name: "CreatedAllListNotAlive"
})
export default class CreatedAllList extends Vue {
    @State((state) => state.user.userInfo) user: any;

    total = 0;
    pageIndex = 1;
    pageSize = 20;
    tableData = [];
    form: any = {
        formName: "",
        status: ""
    };

    formId = "";

    count = {
        finished: 0,
        total: 0,
        unfinished: 0
    };

    ItemCode = "";
    dialogVisible = false;

    created() {
        this.form.formName = this.$route.params.name || "";
        this.formId = this.$route.params.formId || "";
        this.form.status = this.$route.query.status || "";
        this.getTable();
        this.getNumber();
    }

    searchTable() {
        this.formId = "";
        this.getTable(1);
    }

    // 获取数据统计
    async getNumber() {
        const res = await this.$server["task/all/getCount"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.count = res.data.data;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 获取表格数据
    async getTable(page?: any) {
        this.pageIndex = page === 1 ? page : this.pageIndex;
        const res = await this.$server["task/all/getTable"]({
            data: {
                status: Number(this.form.status) || undefined,
                formId: this.formId || undefined,
                formName: this.form.formName,
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.tableData = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 查看子任务
    toChildList(row: any) {
        this.$router.push({
            name: "TownCreatedList",
            query: {
                name: row.formName,
                id: row.id,
                formId: row.formId,
                status: row.fillStatus
            }
        });
    }

    // 查看数据
    toDataList(row: any) {
        localStorage.setItem("childTask", row.childTask);
        this.$router.push({
            name: "TownCreatedAndReceivedDetailAllList",
            query: {
                name: row.formName,
                formId: row.formId,
                status: row.fillStatus
            }
        });
    }

    // 共享
    shareRow(row: any) {
        dialogSelect({
            isSingle: false,
            tabs: [
                {
                    label: "镇成员",
                    name: "town",
                    type: "group"
                }
            ],
            sure: async(vm: any, model: any) => {
                vm.close();
                const res = await this.$server["task/shareData"]({
                    data: {
                        acceptUser: model.selectedList,
                        endTime: row.endDate,
                        formId: row.formId,
                        processInstIds: row.childTask.split(","),
                        startTime: row.startDate
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("分享成功");
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            },
            getOptions: (vm: any, model: any) => this.getOptions(vm, model)
        });
    }

    deleteTask(row: any) {
        this.$confirm(
            "请确认是否需要删除，删除后将同步删除子任务和已采集的相关数据。",
            "删除本任务",
            {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }
        )
            .then(async() => {
                const res = await this.$server["task/totalTask/delete"]({
                    data: {
                        id: row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this.getTable();
                }
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
    }

    // 获取选项
    async getOptions(vm: any, model: any) {
        if (model.name === "town") {
            const res = await this.$server["org/getMember"]({
                data: {
                    departmentId: "",
                    pageSize: 999,
                    currentPage: 1
                },
                loader: false
            });
            if (res.data.code === 200) {
                const arrObj: any = {};
                res.data.data.records
                    .filter((item: any) => item.id !== this.user.id)
                    .forEach((item: any) => {
                        if (arrObj[item.departmentId]) {
                            arrObj[item.departmentId].push({
                                ...item,
                                governmentName: item.departmentName
                            });
                        } else {
                            arrObj[item.departmentId] = [
                                {
                                    ...item,
                                    governmentName: item.departmentName
                                }
                            ];
                        }
                    });
                vm.getOptions(Object.values(arrObj) || []);
            } else {
                vm.getOptions([]);
            }
        }
    }

    // 下载图片
    toDownLoad(code: any) {
        downLoadBase64File("分享码.png", code);
    }
}
</script>

<style lang="scss" scoped>
.created-all-container {
    height: 100%;
    overflow-y: auto;
}
.number-info {
    width: 100%;
    height: 98px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    & > div {
        width: 33%;
        height: 78px;
        padding: 0 20px;
        & > div {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            border-radius: 4px;

            img {
                width: 25px;
                height: 27.5px;
            }
            div {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-self: center;
                color: #ffffff;
                p {
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    text-align: right;
                    margin: 0;
                    span {
                        font-size: 28px;
                        font-weight: bold;
                    }
                }
            }
            &.red {
                background: #de2728;
            }
            &.yellow {
                background: #2c82c9;
            }
            &.blue {
                background: #32a78f;
            }
            &.first4 {
                background: #fb822f;
            }
            &.first5 {
                background: #00b4c8;
            }
        }
    }
}
.rowRed {
    color: #de2728;
}

.img-dialog {
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            display: flex;
            justify-content: center;
            & > div {
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                img {
                    width: 240px;
                    height: 240px;
                    border: 1px solid #ccc;
                    cursor: pointer;
                }
                span {
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
